<template>
  <div class="right_box">
    <div class="right">
      <div v-for="(item, index) in rightList" :key="index" v-on:click="Onright(item.id)" class="right_box_item">
        <p :class="[item.text == '返回顶部' ? 'top' : '']" class="right_text">
          <span>{{ item.text }}</span>
          <img :src="item.img" alt />
        </p>
        <p :class="[item.text == '返回顶部' ? 'top top_text' : '']" class="right_img">
          <img :src="item.imgs" alt />
        </p>
      </div>
    </div>
    <div v-if="abalse">
      <helpMe @Onhelp="Onhelp" />
    </div>
    <el-dialog :visible.sync="dialogTableVisible" center :append-to-body="true" :lock-scroll="false" class="sign_dialog" :close-on-click-modal="true">
      <LoginName v-on:OndialogTable="Ondiong" />
    </el-dialog>
    <el-dialog :visible.sync="dislicense" center :append-to-body="true" :lock-scroll="false" :close-on-click-modal="true">
      <img src="../../assets/img/license.png" alt class="license" />
    </el-dialog>
  </div>
</template>
<script>
import helpMe from "@/components/pc_file/dialog/helpMe.vue";
import LoginName from "@/components/pc_file/dialog/sign.vue";
export default {
  data() {
    return {
      dialogTableVisible: false,
      dislicense: false,
      rightList: [
        {
          id: "1",
          show: "false",
          text: "我的关注",
          img: require(`@/assets/img/wdgzb.png`),
          imgs: require(`@/assets/img/wdgz.png`)
        },
        {
          id: "2",
          show: "false",
          text: "在线咨询",
          img: require(`@/assets/img/zxzcb.png`),
          imgs: require(`@/assets/img/zxzc.png`)
        },
        {
          id: "3",
          show: "false",
          text: "法拍经理",
          img: require(`@/assets/img/fpjlb.png`),
          imgs: require(`@/assets/img/fpjl.png`)
        },
        {
          id: "4",
          show: "false",
          text: "帮我找房",
          img: require(`@/assets/img/bwzfb.png`),
          imgs: require(`@/assets/img/bwzf.png`)
        },
        {
          id: "5",
          show: "false",
          text: "营业执照",
          img: require(`@/assets/img/yyzzb.png`),
          imgs: require(`@/assets/img/yyzz.png`)
        },
        {
          id: "7",
          show: "false",
          text: "返回顶部",
          img: require(`@/assets/img/wtop.png`),
          imgs: require(`@/assets/img/rtop.png`)
        }
      ],
      abalse: false,
      userId: ""
    };
  },
  methods: {
    Onhelp() {
      this.abalse = false;
    },
    // 鼠标移入加入class
    changeActive(val) {
      this.rightList.forEach(item => {
        if (item.id == val) {
          item.show = true;
        }
      });
    },
    removeActive(val) {
      this.rightList.forEach(item => {
        if (item.id == val) {
          item.show = false;
        }
      });
    },
    Ondiong() {
      this.dialogTableVisible = false;
    },
    Onright(val) {
      this.userId = sessionStorage.getItem("userId");
      if (val == "1") {
        if (this.userId) {
          this.$router.push({ name: "my", query: { id: "2" } });
        } else {
          this.dialogTableVisible = true;
        }
      } else if (val == "2") {
        window.open(
          "https://tb.53kf.com/code/client/9a12bb00652ff2c013fe004ae3947f845/1",
          "_blank"
        );
        // window.location.href =
        //   "https://tb.53kf.com/code/client/9a12bb00652ff2c013fe004ae3947f845/1";
      } else if (val == "3") {
        this.$router.push({
          name: "Broker"
        });
      } else if (val == "4") {
        console.log("111");
        this.abalse = true;
      } else if (val == "5") {
        this.dislicense = true;
      } else if (val == "7") {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
    }
  },
  components: {
    helpMe,
    LoginName
  }
};
</script>
<style lang="less" scoped>
.license {
  width: 100%;
}
.right_box {
  .right {
    position: fixed;
    z-index: 10;
    right: 0;
    top: 200px;
    img {
      vertical-align: middle;
      margin-left: 10px;
    }
  }
  .top_text {
    display: block;
  }
  .right_box_item:hover .right_text {
    display: block;
  }
  .right_box_item:hover .top_text {
    display: none;
  }
  .right_red {
    position: fixed;
    z-index: 10;
    right: 0;
    top: 300px;
  }
  .right_img {
    cursor: pointer;
    background: #f8f8f8;
    width: 50px;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    text-align: center;
  }
  .right_text {
    cursor: pointer;
    display: none;
    width: 130px;
    height: 50px;
    background: #ef6f49;
    border-radius: 6px 0px 0px 6px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 0;
  }
  .top {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: 100px;
  }
}
</style>
<style>
.right_dialog > .el-dialog {
  background: url('~@/assets/img/bg.png');
  width: 580px;
  background-size: cover;
}
</style>
